<template>
  <div class="student">
    <!-- <app-header></app-header> -->
    <div class="main">
      <group title="账号信息">
        <x-input title='手机号' text-align="right" v-model="model.telePhone" placeholder="请输入手机号" v-show="userInfos.indexOf('telephone')>-1" ref="telephone" required is-type="china-mobile"></x-input>
        <x-input title='身份证' text-align="right" v-model="model.idcard" placeholder="请输入身份证号" disabled v-show="userInfos.indexOf('idCard')>-1" required ref="idcard"></x-input>
      </group>
      <group title="基本信息">
        <x-input title='姓名' text-align="right" v-model="model.userName" placeholder="请输入姓名" disabled :show-clear="false" v-show="userInfos.indexOf('userName')>-1" required ref="userName"></x-input>
        <popup-picker v-show="userInfos.indexOf('sex')>-1"
                      :title='title2'
                      :data="sexList"
                      v-model="model.sex"
                      placeholder="请选择性别" required ref="sex" disabled>
        </popup-picker>
        <x-input title='职务' text-align="right" placeholder="请输入职务" v-model="model.position" v-show="userInfos.indexOf('position')>-1" required ref="position"></x-input>
        <x-input title='职称' text-align="right" placeholder="请输入职称" v-model="model.zcName" v-show="userInfos.indexOf('zcname')>-1" required ref="zcname"></x-input>
        <popup-picker title='编制类型'
                      :data="bzTypeList"
                      v-model="model.bzType"
                      placeholder="请选择编制类型" show-name v-show="userInfos.indexOf('bztype')>-1" required ref="bztype">
        </popup-picker>
        <popup-picker title='政治面貌'
                      :data="politicsList"
                      v-model="model.politics"
                      placeholder="请选择政治面貌" show-name v-show="userInfos.indexOf('politics')>-1" required ref="politics">
        </popup-picker>
        <popup-picker title='文化程度'
                      :data="educationList"
                      v-model="model.education"
                      placeholder="请选择文化程度" show-name v-show="userInfos.indexOf('education')>-1" required ref="education">
        </popup-picker>
      </group>
      <group title="单位信息" v-if="userInfos.indexOf('area')>-1||userInfos.indexOf('enterpriseName')>-1||userInfos.indexOf('departName')>-1||userInfos.indexOf('enterpriseType')>-1||userInfos.indexOf('workType')>-1">
        <popup-picker :title="title4" :data="cityLists" disabled placeholder="请选择区域" :columns="2" v-model="model.area" show-name v-show="userInfos.indexOf('area')>-1" required ref="area"></popup-picker>
        <x-input title='单位名称' text-align="right" placeholder="请输入单位名称" v-model="model.enterPriseName" v-show="userInfos.indexOf('enterpriseName')>-1" required ref="enterpriseName"></x-input>
        <x-input title='部门名称' text-align="right" placeholder="请输入部门名称" v-model="model.departName" v-show="userInfos.indexOf('departName')>-1" required ref="departName"></x-input>
        <popup-picker :title='title1'
                      :data="checkLevelList"
                      v-model="model.beCheckedLevel" show-name
                      placeholder="请选择单位类型" v-show="userInfos.indexOf('enterpriseType')>-1" required ref="enterpriseType">
        </popup-picker>
        <aptitude-type-tree @AptitudetypeNodes="GetNodesKp" ref="AptitudeTypeKp" :is-disabled="false" v-if="userInfos.indexOf('workType')>-1"></aptitude-type-tree>
      </group>
      <group title="上传图片" v-if="userInfos.indexOf('eleImgUrl')>-1||userInfos.indexOf('organImgUrl')>-1||userInfos.indexOf('eduImgUrl')>-1||userInfos.indexOf('zhiChengImgUrl')>-1">
        <div class="space-img1" v-if="userInfos.indexOf('eleImgUrl')>-1">
          <div class="phone-name">电子照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.eleImgUrl">
              <img :src="model.eleImgUrl" alt />
              <span @click="delEleImg"></span>
            </div>
            <div class="upload-item" style="margin-left:15px" v-if="!model.eleImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadEleImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('organImgUrl')>-1">
          <div class="phone-name">编制证明</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.organImgUrl">
              <img :src="model.organImgUrl" alt />
              <span @click="delOrganImg"></span>
            </div>
            <div class="upload-item" style="margin-left:15px" v-if="!model.organImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadOrganImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('eduImgUrl')>-1">
          <div class="phone-name">学历照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.eduImgUrl">
              <img :src="model.eduImgUrl" alt />
              <span @click="delEduImg"></span>
            </div>
            <div class="upload-item" style="margin-left:15px" v-if="!model.eduImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadEduImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('zhiChengImgUrl')>-1">
          <div class="phone-name">职称照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.zhiChengImgUrl">
              <img :src="model.zhiChengImgUrl" alt />
              <span @click="delZcImg"></span>
            </div>
            <div class="upload-item" style="margin-left:15px" v-if="!model.zhiChengImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadZcImg" />
            </div>
          </div>
        </div>
      </group>

      <span class="btn" @click="save">完 &nbsp;&nbsp; 成</span>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header'
  import { XInput, Group, XButton, Cell, Selector, CellBox, PopupPicker } from 'vux'
  import AptitudeTypeTree from '@/components/AptitudetypeTree'
  import { getAreaList } from "@/api/depart";
  import { applyTrainClass, getTrainClassInfo } from '@/api/trainClass';
  import { GetUserManagerInfo, CreateorUpdate, GetUserTypeList } from "@/api/UserManager";
  import { GetWebAppsetting } from '@/api/GetWebConfig'
  import axios from 'axios'
  import Config from '@/config';
  import { mapGetters } from 'vuex';
  export default {
    components: {
      'app-header': Header,
      XInput,
      XButton,
      Group,
      Cell,
      Selector,
      CellBox,
      PopupPicker,
      AptitudeTypeTree
    },
    data() {
      return {
        trainClassId: '',
        userInfos: [],
        title1: '单位类型',
        title2: '性别',
        title3: '所在市州',
        title4: '所在区域',
        sexList: [['男', '女']],
        sexes: [],
        bzTypeList: [[]],
        politicsList: [[]],
        educationList: [[]],
        checkLevelList: [['全部', '私营', '国企', '其他']],
        beCheckedLevel: [],
        cityList: [['武汉市', '襄阳市', '宜昌市', '其他'], ['江夏区', '襄城区', '枝江市', '其他2']],
        citys: [],
        cityLists: [],
        citys2: [],
        demo02: '',
        list: [{ key: '0', value: '男' }, { key: '1', value: '女' }],
        model: {
          departName: '',
          bzType: [],
          politics: [],
          education: [],
          area: [],
          sex: [],
          beCheckedLevel: [],
          eleImgUrl: '',
          organImgUrl: '',
          eduImgUrl: '',
          zhiChengImgUrl: '',
          listTypeKP: []
        },
        para: {
          id: '',
          userId: '',
          roleNameType: '1'//应急学员
        },
        fileServer:''
      };
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    },
    created() {
      if (this.id) {
        this.para.userId = this.id;
      }
      this.getParams();
      this.fetchData();
    },
    methods: {
      change(item) {
        console.log(item)
        this.beCheckedLevel = item
      },
      getParams() {
        //获取菜单参数
        this.trainClassId = this.$route.query.id
        getTrainClassInfo({ id: this.trainClassId }).then(response => {
          this.userInfos = response.userInfos;
        });
        
        GetWebAppsetting().then(response => {
          this.fileServer = response.data.fileServer;
        })
      },
      fetchData() {
        GetUserManagerInfo(this.para).then(
          response => {
            let tempList = [];
            response.bzTypeList.forEach(item => {
              tempList.push({ name: item.codeContent, value: item.codeContent });
            })
            this.$set(this.bzTypeList, 0, tempList)
            tempList = [];
            response.politicsList.forEach(item => {
              tempList.push({ name: item.codeContent, value: item.codeContent });
            })
            this.$set(this.politicsList, 0, tempList)
            tempList = [];
            response.educationList.forEach(item => {
              tempList.push({ name: item.codeContent, value: item.codeContent });
            })
            this.$set(this.educationList, 0, tempList)
            tempList = [];
            response.departTypeList.forEach(item => {
              tempList.push({ name: item.codeContent, value: item.codeContent });
            })
            this.$set(this.checkLevelList, 0, tempList)
            this.model = response;
            if (this.model.sex) {
              this.model.sex = [this.model.sex];
            }
            else {
              this.model.sex = [];
            }
            if (this.model.politics) {
              this.model.politics = [this.model.politics];
            }
            else {
              this.model.politics = [];
            }
            if (this.model.education) {
              this.model.education = [this.model.education];
            }
            else {
              this.model.education = [];
            }
            if (this.model.bzType) {
              this.model.bzType = [this.model.bzType];
            }
            else {
              this.model.bzType = [];
            }
            if (this.model.city) {
              this.model.area = [this.model.city, this.model.area];
            }
            else {
              this.model.area = [];
            }
            if (this.model.enterPriseType) {
              this.model.beCheckedLevel = [this.model.enterPriseType];
            }
            else {
              this.model.beCheckedLevel = [];
            }
            if (this.model.eleImgUrl) {
              this.model.eleImgUrl = this.fileServer + this.model.eleImgUrl;
            }
            if (this.model.organImgUrl) {
              this.model.organImgUrl = this.fileServer + this.model.organImgUrl;
            }
            if (this.model.eduImgUrl) {
              this.model.eduImgUrl = this.fileServer + this.model.eduImgUrl;
            }
            if (this.model.zhiChengImgUrl) {
              this.model.zhiChengImgUrl = this.fileServer + this.model.zhiChengImgUrl;
            }
          },
          error => {
          }
        );
        GetUserTypeList().then(//获取学员类别
          response => {
            this.stuTypeList = response;
          }
        );
        getAreaList().then(response => {
          this.$nextTick(function () {
            this.cityLists = this.cityLists.concat(response);
          })

        });
      },
      uploadEleImg(e) {
        let file = e.target.files[0];
        let param = new FormData();
        param.append("file", file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        let url = Config.baseurl + Config.uploadFileService;
        axios.post(url, param, config).then((res) => {
          if (res.status == 200) {
            this.model.eleImgUrl = res.data.result.message;
          }
        }).catch((error) => {

        })
      },
      delEleImg() {
        this.model.eleImgUrl = "";
      },
      uploadOrganImg(e) {
        let file = e.target.files[0];
        let param = new FormData();
        param.append("file", file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        let url = Config.baseurl + Config.uploadFileService;
        axios.post(url, param, config).then((res) => {
          if (res.status == 200) {
            this.model.organImgUrl = res.data.result.message;
          }
        }).catch((error) => {

        })
      },
      delOrganImg() {
        this.model.organImgUrl = "";
      },
      uploadEduImg(e) {
        let file = e.target.files[0];
        let param = new FormData();
        param.append("file", file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        let url = Config.baseurl + Config.uploadFileService;
        axios.post(url, param, config).then((res) => {
          if (res.status == 200) {
            this.model.eduImgUrl = res.data.result.message;
          }
        }).catch((error) => {

        })
      },
      delEduImg(){
        this.model.eduImgUrl='';
      },
      uploadZcImg(e) {
        let file = e.target.files[0];
        let param = new FormData();
        param.append("file", file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        let url = Config.baseurl + Config.uploadFileService;
        axios.post(url, param, config).then((res) => {
          if (res.status == 200) {
            this.model.zhiChengImgUrl = res.data.result.message;
          }
        }).catch((error) => {

        })
      },
      delZcImg(){
        this.model.zhiChengImgUrl='';
      },
      save() {
        if (this.userInfos.indexOf('telephone') > -1) {
          if (!this.$refs.telephone.valid) {
            this.$vux.alert.show({
              content: '请输入手机号',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('idCard') > -1) {
          if (!this.$refs.idcard.valid) {
            this.$vux.alert.show({
              content: '请输入身份证号',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('userName') > -1) {
          if (!this.$refs.userName.valid) {
            this.$vux.alert.show({
              content: '请输入姓名',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('sex') > -1) {
          if (this.model.sex.length==0) {
            this.$vux.alert.show({
              content: '请选择性别',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('position') > -1) {
          if (!this.$refs.position.valid) {
            this.$vux.alert.show({
              content: '请输入职务',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('zcname') > -1) {
          if (!this.$refs.zcname.valid) {
            this.$vux.alert.show({
              content: '请输入职称',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('bztype') > -1) {
          if (this.model.bzType.length==0) {
            this.$vux.alert.show({
              content: '请选择编制类型',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('politics') > -1) {
          if (this.model.politics.length==0) {
            this.$vux.alert.show({
              content: '请选择政治面貌',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('education') > -1) {
          if (this.model.education.length==0) {
            this.$vux.alert.show({
              content: '请选择文化程度',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('area') > -1) {
          if (this.model.area.length==0) {
            this.$vux.alert.show({
              content: '请选择所在区域',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('enterpriseName') > -1) {
          if (!this.$refs.enterpriseName.valid) {
            this.$vux.alert.show({
              content: '请输入单位名称',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('departName') > -1) {
          if (!this.$refs.departName.valid) {
            this.$vux.alert.show({
              content: '请输入部门名称',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('enterpriseType') > -1) {
          if (this.model.beCheckedLevel.length==0) {
            this.$vux.alert.show({
              content: '请选择单位类型',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('eleImgUrl') > -1) {
          if (!this.model.eleImgUrl) {
            this.$vux.alert.show({
              content: '请上传电子照片',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('organImgUrl') > -1) {
          if (!this.model.organImgUrl) {
            this.$vux.alert.show({
              content: '请上传编制证明',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('eduImgUrl') > -1) {
          if (!this.model.eduImgUrl) {
            this.$vux.alert.show({
              content: '请上传学历照片',
            });
            return;
          }
        }
        if (this.userInfos.indexOf('zhiChengImgUrl') > -1) {
          if (!this.model.zhiChengImgUrl) {
            this.$vux.alert.show({
              content: '请上传职称照片',
            });
            return;
          }
        }
        let form = {
          IdentityFlag: '1',//0监管管理员、1系统内人员、2学员
          eleImgUrl: this.model.eleImgUrl,//电子照片
          organImgUrl: this.model.organImgUrl,//编制照片
          eduImgUrl: this.model.eduImgUrl,//学历照片
          zhiChengImgUrl: this.model.zhiChengImgUrl,//职称照片
          userName: this.model.userName,
          stopUse: "1",
          telePhone: this.model.telePhone,
          sex: this.model.sex[0],//性别
          idcard: this.model.idcard,
          enterPriseType: this.model.beCheckedLevel[0],//单位类型
          politics: this.model.politics[0],//政治面貌
          education: this.model.education[0],//文化程度
          bzType: this.model.bzType[0],//编制类型
          city: this.model.area[0],//市
          area: this.model.area[1],
          roleName: '',//角色名称
          createUserDepart: '',//创建单位
          createDate: '',
          createUser: '',
          enterPriseName: this.model.enterPriseName,//单位名称
          departName: this.model.departName,//部门名称
          position: this.model.position,//职务
          zcName: this.model.zcName,//职称
          bzTypeList: [],
          educationList: [],
          politicsList: [],
          departTypeList: [],
          stuSelectTypeList: [],//学员类别
          listTypeKP: [],//考评工种,
          trainClassId: this.trainClassId,
          userId: this.id,
          listTypeKP: this.model.listTypeKP
        };
        applyTrainClass(form).then(
          response => {
            this.$vux.alert.show({
              content: '报名成功',
            });
            this.$router.push({ path: '/myTrainclass' });
          }
        );
      },
      GetNodesKp(nodelist) {
        this.model.listTypeKP = nodelist
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .student .weui-cells__title {
    height: 40px;
    font-size: 15px;
    color: #2269ff;
    font-weight: bold;
    line-height: 40px;
    width: 90%;
  }

  .student .weui-cell {
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    margin-right: 15px;
    font-weight: bold;
  }

  .student .weui-cell_select-after .weui-select {
    color: inherit !important;
    direction: rtl !important;
  }

  .student weui-input {
    color: #999999;
  }
</style>>
<style scope>
  .main {
    padding: 0px 0px 25px 0px;
    text-align: left;
  }

  .btn {
    display: block;
    height: 45px;
    font-size: 17px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 45px;
    width: 230px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin: auto;
    margin-top: 20px;
  }

  .space-img1 {
    margin-top: 15px;
  }

  .space-img4 {
    margin-bottom: 20px;
  }

  .space-img1 > img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin: 5px 0 25px 0;
  }

  .space-img1 .phone-name, .space-img2 .phone-name, .space-img3 .phone-name, .space-img4 .phone-name {
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
  }

  .space-img1, .space-img2, .space-img3, .space-img4 {
    border-bottom: 1px solid #eee;
    padding-left:20px;
  }

  .upload-wrap {
    display: flex;
    padding-bottom:10px;
  }
  .upload-item {
    position: relative;
  }
  .upload-item img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }
  .upload-item span {
    background: url(../../assets/images/delete.png) no-repeat right top;
    background-size: 15px;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    right: 0;
  }
  input[type="file"] {
    position: absolute;
    top: 0;
    opacity: 0;
    width: 54px;
    height: 54px;
  }
</style>>
</style>
